<template>
  <div class="user-account-management">
    <!-- 筛选及搜索区域 -->
    <div class="search-section">
      <!-- 栅格布局容器 -->
      <el-row :gutter="20">
        <!-- 查询表单区域，占满一行或指定列宽 -->
        <el-col :span="24">
          <el-form :inline="true" :model="searchForm" ref="searchForm">
            <el-form-item label="账户类型">
              <el-select
                v-model="searchForm.accountType"
                placeholder="全部"
                clearable
              >
                <el-option
                  v-for="item in accountTypeOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="searchForm.accountStatus"
                placeholder="全部"
                clearable
              >
                <el-option
                  v-for="item in statusOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品版本">
              <el-select
                v-model="searchForm.productVersion"
                placeholder="全部"
                clearable
              >
                <el-option
                  v-for="item in productVersionOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户搜索">
              <el-input
                v-model="searchForm.keywords"
                placeholder="请输入用户名"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 新增用户按钮区域，单独占一行 -->
        <el-col :span="24" style="text-align: left; margin-top: 12px">
          <el-button type="primary" @click="handleAddUser">新增用户</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 新增用户弹窗 -->
    <el-dialog
      title="用户信息"
      :visible.sync="addUserDialogVisible"
      width="500px"
      :before-close="handleAddUserDialogClose"
    >
      <el-form :model="addUserForm" label-width="80px">
        <el-form-item label="账户名" required>
          <el-input v-model="addUserForm.accountName"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="addUserForm.username"></el-input>
        </el-form-item>
        <!-- <el-form-item label="账户状态" required>
          <el-select v-model="addUserForm.accountStatus">
            <el-option label="全部" value="全部"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="账户状态">
          <el-select
            v-model="addUserForm.accountStatus"
            placeholder="全部"
            clearable
          >
            <el-option
              v-for="item in statusOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="账户角色" required>
          <el-select
            v-model="addUserForm.roleNames"
            placeholder="请选择角色"
            clearable
          >
            <el-option label="管理员" value="1"></el-option>
            <el-option label="普通用户" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账户密码" required>
          <el-input v-model="addUserForm.password"></el-input>
        </el-form-item>
        <el-form-item label="手机号" required>
          <el-input v-model="addUserForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addUserForm.remarks"></el-input>
        </el-form-item>
        <el-form-item label="用户头像">
          <el-upload
            class="avatar-upload"
            ref="avatarUpload"
            :action="upLoadParam.url"
            :headers="{ token: upLoadParam.token }"
            :file-list="avatarFileList"
            :auto-upload="true"
            :on-success="handleAvatarUploadSuccess"
            :on-change="handleAvatarFileChange"
            :on-remove="handleAvatarRemove"
            :limit="1"
            accept="image/*"
          >
            <el-button size="small" type="primary">选择头像</el-button>
            <div slot="tip" class="el-upload__tip">支持jpg、png等图片格式</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleAddUserDialogClose">取消</el-button>
          <el-button type="primary" @click="handleAddUserConfirm"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      stripe
      v-loading="tableLoading"
      element-loading-text="正在加载数据..."
      :border="false"
    >
      <el-table-column label="序号" width="60" align="center">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="accountName"
        label="用户账号"
        min-width="100"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.accountName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名称"
        min-width="100"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="roleNames"
        label="用户角色"
        min-width="100"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.roleNames }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="accountType"
        label="账户类型"
        min-width="100"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.accountType }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="productVersion"
        label="产品版本"
        min-width="100"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.productVersion }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="accountStatus"
        label="状态"
        min-width="100"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.accountStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createdTime"
        label="开户时间"
        min-width="130"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.createdTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="validityPeriod"
        label="账户有效期"
        min-width="130"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.validityPeriod }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="备注"
        min-width="100"
        align="center"
      >
        <template #default="scope">
          <span>{{ scope.row.remarks }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" align="center">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">
            编辑
          </el-button>
          <el-button
            type="text"
            style="color: red"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑用户弹窗 -->
    <el-dialog
      title="编辑用户信息"
      :visible.sync="editDialogVisible"
      width="600px"
      :before-close="handleEditDialogClose"
    >
      <el-form
        :model="editForm"
        ref="editFormRef"
        label-width="100px"
        :rules="editFormRules"
      >
        <el-form-item label="用户账号*" prop="accountName">
          <el-input v-model="editForm.accountName"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名" prop="username">
          <el-input v-model="editForm.username"></el-input>
        </el-form-item>
        <el-form-item label="联系电话*" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="editForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="editForm.confirmPassword"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户角色*" prop="roleNames">
          <el-select v-model="editForm.roleNames" placeholder="请选择">
            <el-option label="管理员" value="1"></el-option>
            <el-option label="普通用户" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属租户" prop="tenantId">
          <el-select
            v-model="editForm.tenantId"
            placeholder="请选择所属租户"
            clearable
            @change="handleTenantChange"
          >
            <el-option
              v-for="item in tenantOptions"
              :key="item.tenantId"
              :label="item.tenantName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 企业信息项改造（设为disabled） -->
        <el-form-item label="所属行业" prop="industry">
          <el-input v-model="editForm.industry" disabled></el-input>
        </el-form-item>
        <el-form-item label="企业地址" prop="address">
          <el-input v-model="editForm.companyAddress" disabled></el-input>
        </el-form-item>
        <el-form-item label="企业电话" prop="telephone">
          <el-input v-model="editForm.companyPhone" disabled></el-input>
        </el-form-item>
        <el-form-item label="企业传真" prop="faxNumber">
          <el-input v-model="editForm.companyFax" disabled></el-input>
        </el-form-item>
        <el-form-item label="账户类型*" prop="accountType">
          <el-select v-model="editForm.accountType" placeholder="请选择">
            <!-- 循环后端返回的 accountTypeOptions -->
            <el-option
              v-for="item in accountTypeOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 编辑用户弹窗中的“产品版本”下拉框 -->
        <el-form-item label="产品版本*" prop="productVersion">
          <el-select v-model="editForm.productVersion" placeholder="请选择">
            <!-- 循环后端返回的 productVersionOptions -->
            <el-option
              v-for="item in productVersionOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户日期" prop="createdTime">
          <el-date-picker
            v-model="editForm.createdTime"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="账户有效日期" prop="validityPeriod">
          <el-date-picker
            v-model="editForm.validityPeriod"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>

        <!-- 编辑用户弹窗中的“账户状态”下拉框 -->
        <el-form-item label="账户状态*" prop="accountStatus">
          <el-select v-model="editForm.accountStatus" placeholder="请选择">
            <!-- 循环后端返回的 statusOptions -->
            <el-option
              v-for="item in statusOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业介绍" prop="introduction">
          <el-input
            v-model="editForm.introduction"
            type="textarea"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleEditDialogClose">取消</el-button>
          <el-button type="primary" @click="handleEditConfirm">保存</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getFeiShuUpLoadProjectParams } from "@/api/tenant";
export default {
  name: "UserAccountManagement",
  data() {
    return {
      showTenantWarning: false,
      tenantOptions: [],
      // 编辑弹窗相关
      editDialogVisible: false,
      editForm: {
        id: "",
        accountName: "",
        username: "",
        phone: "",
        email: "",
        password: "",
        confirmPassword: "",
        roleNames: "",
        tenant: "",
        industry: "",
        companyName: "",
        companyAddress: "",
        companyPhone: "",
        companyFax: "",
        tenantId: "",
        accountType: "",
        productVersion: "",
        createdTime: "",
        validityPeriod: "",
        accountStatus: "",
        introduction: "",
      },
      editFormRules: {
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          // { min: 6, message: "密码长度不能少于6位", trigger: "blur" }, // 可选：添加密码长度校验
        ],
        confirmPassword: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          // 核心：校验两次密码是否一致
          {
            validator: (rule, value, callback) => {
              // 对比确认密码与登录密码
              if (value !== this.editForm.password) {
                callback(new Error("两次输入的密码不一致"));
              } else {
                callback(); // 校验通过
              }
            },
            trigger: "blur", // 失焦时触发校验
          },
        ],
        accountName: [
          { required: true, message: "请输入用户账号", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            pattern: /^1\d{10}$/,
            message: "请输入正确的手机号码格式",
            trigger: "blur",
          },
        ],
        roleNames: [
          { required: true, message: "请选择用户角色", trigger: "change" },
        ],
        accountType: [
          { required: true, message: "请选择账户类型", trigger: "change" },
        ],
        productVersion: [
          { required: true, message: "请选择产品版本", trigger: "change" },
        ],
        accountStatus: [
          { required: true, message: "请选择账户状态", trigger: "change" },
        ],
        // 可根据需要补充其他字段的校验规则
      },
      // 原有其他数据...
      avatarFileList: [], // 头像文件列表（仅保留一个文件）
      avatarUrl: "", // 飞书返回的头像存储地址
      upLoadParam: {}, // 飞书上传参数（包含url、token等）
      //新增用户
      addUserDialogVisible: false, // 控制新增用户弹窗显示隐藏
      addUserForm: {
        // 新增用户表单数据
        accountName: "",
        accountStatus: "全部",
        email: "",
        roleNames: "请选择角色",
        password: "",
        phone: "",
        remarks: "",
        username: "",
        avatar: "",
      },
      searchForm: {
        accountType: "",
        accountStatus: "",
        productVersion: "",
        keywords: "",
      },
      accountTypeOptions: [],
      statusOptions: [],
      productVersionOptions: [],
      tableData: [],
      tableLoading: false,
      totalCount: 10, // 示例数据总数，实际需接口返回
      currentPage: 1,
      pageSize: 10,
    };
  },
  created() {
    this.fetchTableData();
    this.initDeliveryOptions();
    this.getTenantOptions(); // 新增：获取租户下拉数据
  },
  mounted() {
    // 初始化飞书上传参数（与参考代码中文件上传逻辑一致）
    this.upLoadParam = getFeiShuUpLoadProjectParams();
  },
  methods: {
    async handleTenantChange(tenantId) {
      console.log("tenantId", tenantId);

      if (!tenantId) return; // 选了空，不请求
      try {
        const res = await this.$request.get(
          `/system/sysTenant/info?tenantId=${tenantId}`
        );
        console.log("ressss", res);
        if (res.code === 200 && res.data) {
          const companyInfo = res.data;
          // 回填企业信息到表单，且这些字段不可修改
          this.$set(this.editForm, "industry", companyInfo.industry || "");
          this.$set(this.editForm, "companyAddress", companyInfo.address || "");
          this.$set(this.editForm, "companyPhone", companyInfo.telephone || "");
          this.$set(this.editForm, "companyFax", companyInfo.faxNumber || "");
          this.$set(this.editForm, "companyName", companyInfo.tenantName || "");
          this.$set(
            this.editForm,
            "introduction",
            companyInfo.introduction || ""
          );
        }
      } catch (error) {
        console.error("获取企业信息失败:", error);
        this.$message.error("获取企业信息失败，请重试");
      }
    },
    async getTenantOptions() {
      try {
        const res = await this.$request.get("/system/sysTenant/list");
        if (res.code === 200) {
          // 假设接口返回格式：[{id: '1', name: '租户A'}, ...]
          this.tenantOptions = res.data;
        }
      } catch (error) {
        console.error("获取租户列表失败:", error);
        this.$message.error("获取租户列表失败，请重试");
      }
    },
    // 关闭编辑弹窗
    handleEditDialogClose() {
      this.editDialogVisible = false;
      this.$refs.editFormRef.resetFields(); // 重置表单校验和数据
    },
    // 点击保存按钮触发
    async handleEditConfirm() {
      try {
        await this.$refs.editFormRef.validate(); // 校验表单
        // 调用编辑接口，示例：
        const res = await this.$request.post(
          "/system/sysAccount/addB",
          this.editForm
        );
        if (res.code === 200) {
          this.$message.success("保存成功!");
          this.editDialogVisible = false;
          this.fetchTableData(); // 重新获取表格数据
        } else {
          this.$message.error(`保存失败: ${res.msg || "未知错误"}`);
        }
      } catch (error) {
        console.error("编辑校验或接口调用失败:", error);
        this.$message.error("编辑失败，请检查表单数据或稍后重试");
      }
    },
    handleAvatarFileChange(file, fileList) {
      // 只保留最后一个选择的文件（避免多文件）
      this.avatarFileList = fileList.slice(-1);
    },

    // 2. 移除头像文件时触发（清空地址和列表）
    handleAvatarRemove(file, fileList) {
      this.avatarFileList = [];
      this.avatarUrl = ""; // 清空飞书地址
    },

    handleEdit(row) {
      const button = document.activeElement;
      console.log("表格行数据（row）：", row);
      this.editForm = {
        ...row,
        password: "", // 关键：清空密码，不显示原有值
        confirmPassword: "", // 清空确认密码
      };

      // 2. 如果 tenantId 有效，请求企业信息并补充到表单（不覆盖 row 数据）
      if (row.tenantId && row.tenantId !== "0") {
        this.tableLoading = true;
        this.$request
          .get(`/system/sysTenant/info?tenantId=${row.tenantId}`)
          .then((res) => {
            if (res.code === 200 && res.data) {
              const companyInfo = res.data;
              // 只补充企业相关字段，不影响 row 中的基础数据（如 accountName）
              this.editForm.tenantId = companyInfo.id;
              this.$set(this.editForm, "industry", companyInfo.industry || "");
              this.$set(
                this.editForm,
                "companyAddress",
                companyInfo.address || ""
              );
              this.$set(
                this.editForm,
                "companyPhone",
                companyInfo.telephone || ""
              );
              this.$set(
                this.editForm,
                "companyFax",
                companyInfo.faxNumber || ""
              );
              this.$set(
                this.editForm,
                "companyName",
                companyInfo.tenantName || ""
              );
              this.$set(
                this.editForm,
                "introduction",
                companyInfo.introduction || ""
              );
            }
          })
          .finally(() => {
            this.tableLoading = false;
          });
      }

      // 3. 如果 tenantId 为 0，显示提示（不影响 row 数据赋值）
      else if (row.tenantId === "0") {
        this.$notify({
          title: "提示",
          message: "⚠️ 当前账户未绑定租户企业，请绑定",
          type: "warning",
          duration: 3000,
          position: "top-right",
        });
      }

      // 4. 打开弹窗，此时 editForm 已被 row 数据填满
      this.editDialogVisible = true;
      console.log("最终编辑表单数据：", this.editForm);

      // 处理焦点
      setTimeout(() => {
        if (button && button.blur) button.blur();
        document.body.focus();
      }, 100);
    },

    // 3. 头像上传到飞书成功后触发（获取存储地址）
    handleAvatarUploadSuccess(response) {
      if (response && response.code === 200) {
        // 假设后端返回的地址在response.msg中（与参考代码一致）
        this.avatarUrl = response.msg;
        this.$message.success("头像上传成功");
      } else {
        this.$message.error("头像上传失败，请重试");
      }
    },
    handleAddUser() {
      this.addUserDialogVisible = true;
    },
    handleAddUserDialogClose() {
      // 弹窗关闭时可做的清理操作，比如重置表单
      this.addUserForm = {
        accountName: "",
        accountStatus: "全部",
        email: "",
        roleNames: "请选择角色",
        password: "",
        phone: "",
        remarks: "",
        username: "",
        avatar: "",
        avatarFileList: [],
        avatarUrl: "",
      };
      this.addUserDialogVisible = false;
    },
    handleAddUserConfirm() {
      if (this.avatarUrl) {
        this.addUserForm.avatar = this.avatarUrl; // 赋值给表单的avatar字段
      }
      this.$request
        .post("/system/sysAccount/addB", this.addUserForm)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("新增用户成功");
            this.addUserDialogVisible = false;
            this.fetchTableData(); // 新增成功后重新获取表格数据
            this.handleAddUserDialogClose();
          }
        })
        .catch((error) => {
          console.error("新增用户失败:", error);
          this.$message.error("新增用户失败，请重试");
        });
      // 先简单模拟，实际替换为真实接口逻辑
      this.addUserDialogVisible = false;
      this.fetchTableData();
    },
    async initDeliveryOptions() {
      // 1. 获取产品版本
      const productVersion = await this.loadDeliveryData("productVersion");
      this.productVersionOptions = productVersion;
      // 2. 获取账户类型
      const accountType = await this.loadDeliveryData("accountType");
      this.accountTypeOptions = accountType;
      // 2. 获取账户状态
      const accountStatus = await this.loadDeliveryData("accountStatus");
      this.statusOptions = accountStatus;
      // const roles = await this.loadDeliveryData("roles");
      // this.rolesOptions = roles;
    },
    async loadDeliveryData(type) {
      this.optionsLoading = true;
      try {
        // 调用后端接口，传递type参数（路径参数）
        const res = await this.$request.get(
          `/trade/carbonTradeQuote/getDeliveryMethod/${type}`
        );
        // 假设后端返回格式：{ success: true, data: [] }（根据你的ApiResult结构调整）
        if (res.code == 200) {
          return res.data; // 返回查询到的列表
        } else {
          this.$message.warning("获取数据失败");
          return [];
        }
      } catch (error) {
        console.error(`获取${type}失败：`, error);
        return [];
      } finally {
        this.optionsLoading = false;
      }
    },
    // 获取表格数据
    async fetchTableData() {
      this.tableLoading = true;
      try {
        // 模拟接口请求，实际替换为真实接口
        const res = await this.$request.post("/system/sysAccount/search", {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          ...this.searchForm,
        });
        if (res.code === 200) {
          this.tableData = res.data.list;
          this.totalCount = res.data.total;
        }
      } catch (error) {
        console.error("获取数据失败:", error);
        this.$message.error("网络错误，请重试");
      } finally {
        this.tableLoading = false;
      }
    },
    // 搜索
    handleSearch() {
      this.currentPage = 1;
      this.fetchTableData();
    },

    // 删除用户
    handleDelete(row) {
      // 记录当前点击的按钮元素
      const button = document.activeElement;

      this.$confirm("此操作将永久删除该用户，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        distinguishCancelAndClose: true,
        // 关闭前的回调，处理焦点问题
        beforeClose: (action, instance, done) => {
          done(); // 关闭弹窗
          // 延迟执行，确保弹窗已完全关闭
          setTimeout(() => {
            // 移除按钮焦点
            if (button && button.blur) {
              button.blur();
            }
            // 额外措施：将焦点移到文档body上
            document.body.focus();
          }, 100);
        },
      })
        .then(async () => {
          try {
            // 显示加载状态
            this.tableLoading = true;

            // 调用后端删除接口，使用row.id作为路径参数
            const res = await this.$request.delete(
              `/system/sysAccount/delete/${row.id}`
            );

            if (res.code === 200) {
              this.$message.success("删除成功!");
              // 重新获取表格数据
              this.fetchTableData();
            } else {
              // 后端返回业务错误
              this.$message.error(`删除失败: ${res.msg || "未知错误"}`);
            }
          } catch (error) {
            // 捕获网络错误
            console.error("删除接口调用失败:", error);
            this.$message.error("网络异常，删除失败，请稍后重试");
          } finally {
            // 无论成功失败都关闭加载状态
            this.tableLoading = false;
          }
        })
        .catch((action) => {
          // 取消删除时的提示（区分取消按钮和关闭弹窗）
          if (action === "cancel") {
            this.$message.info("已取消删除");
          } else {
            // 点击关闭按钮时的处理
            this.$message.info("操作已取消");
          }
        });
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.fetchTableData();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchTableData();
    },
  },
};
</script>

<style scoped>
::v-deep .el-notification {
  z-index: 9999 !important;
}
.user-account-management {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 40px);
}

.search-section {
  margin-bottom: 16px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.el-table {
  width: 100%;
}
</style>